<template>
  <el-dialog title="分配角色" :visible="showRoleDialog" @open="loadRoleList" @close="handleClose">
    <!-- 角色列表 -->
    <el-checkbox-group v-model="roleIds" v-loading="loading">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
// 发送请求 获取所有的分配数据接口
import { reqGetRoleList } from '@/api/setting.js'
// 获取用户的当前角色的分配数据接口
import { getDetailInfo } from '@/api/user.js'
// 上传分配后的数据接口
import { reqAssignRoles } from '@/api/employees.js'
export default {
  name: 'AssignRole',
  props: {
    // 控制组件显示与隐藏
    showRoleDialog: {
      type: Boolean,
      required: true
    },
    // 用户的id值
    userId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      // 设置加载状态位
      loading: false,
      // 选中的角色ids
      roleIds: [],
      // 角色列表
      list: []
    }
  },
  methods: {
    // 设置上传勾选后的数据
    async handleSubmit () {
      // 分配角色提交表单
      const ret = await reqAssignRoles({
        // 上传参数1 是用户id
        id: this.userId,
        // 上传参数2 是勾选后的数据
        roleIds: this.roleIds
      })
      if (ret.code === 10000) {
        // 分配权限成功后 上传
        this.handleClose()
      } else {
        this.$message.error(ret.message)
      }
    },
    // 基于promise.all([]) 方法实现同时获取需要调用的api接口(同时调用两个接口)
    // 获取顺序按数组排序获取
    loadRoleList () {
      // 获取所有可选的权限信息
      const allRoles = reqGetRoleList({
        // 根据页码分页来获取的数据
        page: 1,
        // 直接把页数条设置为最大化 获取所有数据
        pagesize: 1000
      })
      // 获取用户当前的权限信息
      const currentRoles = getDetailInfo(this.userId)
      // 合并两个异步任务 合并到触发(按数组排序分先后)
      // 调用Promise同步方法的 Promise.all 合并两个异步任务一起触发(按数组排序分先后 根据其索引值 进行选中[索引值])
      Promise.all([allRoles, currentRoles]).then(results => {
        // 处理第一个异步任务 获取用户可选的权限列表
        this.list = results[0].data.rows
        // 获取第二个异步 获取用户已选的权限列表
        this.roleIds = results[1].data.roleIds
      }).catch(() => {
        // 处理错误的信息
        this.$message.error('获取角色列表数据失败')
      })
    },
    // ---------------------- 拆分写法
    // // 加载所有的类别数据 打印到页面上
    // async loadRoleList () {
    //   this.loading = true
    //   const ret = await reqGetRoleList({
    //     // 根据页码分页来获取的数据
    //     page: 1,
    //     // 直接把页数条设置为最大化 获取所有数据
    //     pagesize: 1000
    //   })
    //   if (ret.code === 10000) {
    //     // 获取成功 储存所有分配
    //     this.list = ret.data.rows
    //     this.loading = false
    //   } else {
    //     // 获取失败提示用户
    //     this.$message.error(ret.message)
    //     this.loading = false
    //   }
    //   // 获取当前用户的角色信息
    //   const currentRoles = await getDetailInfo(this.userId)
    //   this.loading = true
    //   // 获取用户的当前角色的分配数据 储存起来 进行勾选
    //   if (currentRoles.code === 10000) {
    //     // 如果获取成功 进行赋值
    //     this.roleIds = currentRoles.data.roleIds
    //     this.loading = false
    //   } else {
    //     // 获取失败提示用户
    //     this.$message.error(ret.message)
    //     this.loading = false
    //   }
    // },
    // 控制权限弹窗显示隐藏
    handleClose () {
      this.$emit('update:showRoleDialog', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.assign-role {
  ::v-deep {
    .el-checkbox {
      font-size: 30px;
    }
  }
}
</style>
